let oContent = document.querySelector('.commodity')
// let oTotalPrice = document.querySelector('.total')
let oBacbig = document.querySelector('.bacbig')
let oTitlebig = document.querySelector('.titlebig')
let oLastbig = document.querySelector('.lastbig')
let oTotal = document.querySelector('.total')
let oGuessLike = document.querySelector('.guessLike')
let oLikeCom = document.querySelector('.likeCom')
let main = document.querySelector('main')
let arr3=[]
        let arr = JSON.parse(localStorage.getItem('shopArr'))||[]
        console.log(arr);
        dataHTML()
        function dataHTML() {
            oContent.innerHTML = ''
            let price = 0
            if (arr.length === 0) {
   
                oBacbig.innerHTML = `<div class="bac">
                <div class="bac_small">
                    <p>购物车快饿瘪了，主人快给我挑点宝贝吧</p>
                    <a href="./index.html">马上去逛逛</a>
                </div>
            </div>
                `
                oTitlebig.style.display = 'none'
                oLastbig.style.display = 'none'
                oGuessLike.style.display = 'none'

            } else if (arr.length !== 0) {
                oGuessLike.style.display = 'block'

    
            }
            arr.forEach(ele => {
                let str = `<div class="list">
                <div class="listLeft">
                    <input goodsId="${ele[0].id}" ${ele.flag ? 'checked' : ''} type="checkbox">
                    <a goodsId="${ele[0].id}" href="./details.html"><img src="${ele[0].imgBig}" alt=""></a>
                    <div class="names">
                        <span>${ele[0].introduce}</span>
                        <span>颜色：${ele[0].color}</span>
                    </div>
                </div>
                <div class="listRight">
                    <p>￥${(parseInt(ele[0].price)).toFixed(2)}</p>
                    <div class="inputs">
                        <input goodsId="${ele[0].id}" type="button" value="-" class="add">
                        <input goodsId="${ele[0].id}" type="text" value="${ele.count}" class="center">
                        <input goodsId="${ele[0].id}" type="button" value="+" class="sub">
                    </div>
                    <p>￥${(ele.count * ele[0].price).toFixed(2)}</p>
                    <p><a goodsId="${ele[0].id}" href="javascript:;">删除</a></p>
                </div>             
            </div>`

                oContent.innerHTML += str

                if (ele.flag) {
                    price += parseInt(ele.count) * parseInt(ele[0].price)
                }
                
            }

            )

            // 重新赋值数据
            localStorage.setItem('shopArr', JSON.stringify(arr))

            // 总价
            oTotal.innerHTML = `<span>应付总额：</span>
            <span>￥${price.toFixed(2)}</span>
            <a href="javascript:;">去结算</a>
            `
        }

        pAjax({
            url: '../server/car.php'
          }).then(function (res) {
          
            arr3= JSON.parse(res)
            console.log(arr3);
            // 推荐
            arr3.forEach(ele => {
              let str = `
              <li>
              <a href="../html/details.html?id=${ele.id}"  target="_blank">
                  <img src="${ele.imgBig}" alt="">
              </a>
              <div class="pri">
                  ￥ ${ele.price}
              </div>
              <span>${ele.introduce}</span>
          </li>
                `
                oLikeCom.innerHTML += str
            })
          })
        // 全选计数
        var count = arr.length
        oContent.addEventListener('click', function (ev) {
            // 减
            if (ev.target.value === '-') {
       
                let id = ev.target.getAttribute('goodsId')
                arr.forEach(ele => {
                    console.log(ele[0].id,id);
                    if (ele[0].id == id) {

                        ele.count--
                        ele.flag = true
                        if (ele.count === 0) {
                            ele.count = 1
                        }
                    }
                })
                dataHTML()
            }
            // 加
            if (ev.target.value === '+') {
                let id = ev.target.getAttribute('goodsId')
                arr.forEach(ele => {
                    if (ele[0].id == id) {
                        ele.count++
                        ele.flag = true
                    }
                })
                dataHTML()
            }
            // 删除
            if (ev.target.tagName === 'A') {
                let id = ev.target.getAttribute('goodsId')
                for (let i = 0; i < arr.length; i++) {
                    if (arr[0][i].id === id) {
                        arr.splice(i, 1)
                        i--
                    }
                }
                dataHTML()
            }
            // if (ev.target.tagName === 'button') {
            //     console.log(11);
            //     arr.length = 0
            // }
            // 商品单一选择
            if (ev.target.type === 'checkbox') {
                let id = ev.target.getAttribute('goodsId')
                arr.forEach((ele, index) => {
                    if (ele[0].id === id) {
                        ele.flag = !ele.flag

                        // 计数
                        if (ele.flag) {
                            count++
                        } else {
                            count--
                        }

                        // 全选按钮
                        if (count === arr.length) {
                            oCheckboxAll.checked = true
                        } else {
                            oCheckboxAll.checked = false
                        }
                    }
                })
                dataHTML()
            }
        })
        oContent.addEventListener('change', function (ev) {
            if (ev.target.type === 'text') {
                let id = ev.target.getAttribute('goodsId')
                arr.forEach(ele => {
                    if (ele[0].id === id) {
                        ele.count = parseInt(ev.target.value)
                        ele.flag = true
                    }
                })
                dataHTML()
            }
        })

        let oCheckboxAll = document.querySelector('.all')
        oCheckboxAll.addEventListener('change', function () {
            console.log(11);
            if (this.checked) {
                arr.forEach(ele => {
                    ele.flag = true
                    count = arr.length
                })
            } else {
                arr.forEach(ele => {
                    ele.flag = false
                    count = 0
                })
            }
            dataHTML()
        })

        // 清空购物车   
        let buycar = document.querySelector('.buycar')
        buycar.addEventListener('click',function(){
            localStorage.removeItem('shopArr')
            window.location.reload() 
        })


// console.log(oRow);
// oLikeCom.addEventListener('click', function (ev) {
//     let newArr2 = JSON.parse(localStorage.getItem('shopArr'))||[]
 
//     if (ev.target.className === 'dianji') {
       
 
//         let id = ev.target.getAttribute('goodsid')
//         let carArr = JSON.parse(localStorage.getItem('shopArr'))||[]
//               // 是否找到商品
//               let flag = true
//               // 去重
//               carArr.forEach(ele => {
//                   if (ele.goodsid === id) {
//                       ele.count+=1
//                       flag = false
//                   }
//               })
      
//               // 存一个商品对象值
//               if (flag) {
//                   arr3.forEach((ele,index) => {
//                       console.log(ele);
//                       if (ele.id === id) {
//                         carArr.push({
//                               count: 1,
//                               flag: true,
//                               ...ele
//                           })
//                       }
//                   })
//               }
      
//               console.log(carArr)
//               // 存到购物车列表页
//               localStorage.setItem('shopArr', JSON.stringify(carArr))
//               alert('成功加入购物车')


//     }
// })